/*
    创建者：shuxiaokai
    创建时间：2021-08-15 16:34
    模块名称：接口文档录入
    备注：
*/
<template>
  <div v-loading="loading" class="apidoc" :class="{ vertical: layout === 'vertical' }">
    <div class="request-layout" :class="{ vertical: layout === 'vertical' }">
      <s-operation></s-operation>
      <s-params></s-params>
    </div>
    <el-divider v-show="layout === 'vertical' && !isVerticalDrag" content-position="left">Response</el-divider>
    <s-resize-y
      v-if="layout === 'vertical'"
      :min="150"
      :max="550"
      :height="350"
      name="response-y"
      tabindex="1"
      @dragStart="isVerticalDrag = true"
      @dragEnd="isVerticalDrag = false"
    >
      <s-response></s-response>
    </s-resize-y>
    <s-resize-x v-if="layout === 'horizontal'" :min="500" :max="750" :width="500" name="response" bar-left class="response-layout" tabindex="1">
      <s-response></s-response>
    </s-resize-x>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import type { ApidocTab } from '@@/store'
import { apidocCache } from '@/cache/apidoc'
import operation from './operation/operation.vue'
import params from './params/params.vue'
import response from './response/response.vue'

export default defineComponent({
  components: {
    's-operation': operation,
    's-params': params,
    's-response': response,
  },
  data() {
    return {
      isVerticalDrag: false
    };
  },
  computed: {
    currentSelectTab(): ApidocTab | null { //当前选中的doc
      const projectId = this.$route.query.id as string;
      const tabs = this.$store.state['apidoc/tabs'].tabs[projectId];
      const currentSelectTab = tabs?.find((tab) => tab.selected) || null;
      return currentSelectTab;
    },
    loading() {
      return this.$store.state['apidoc/apidoc'].loading;
    },
    layout() {
      return this.$store.state['apidoc/baseInfo'].layout;
    },
  },
  watch: {
    currentSelectTab: {
      handler(val: ApidocTab | null, oldVal: ApidocTab | null) {
        const isApidoc = val?.tabType === 'doc';
        if (isApidoc && val?._id !== oldVal?._id) {
          this.getApidocInfo();
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    //获取api文档数据
    getApidocInfo() {
      if (!this.currentSelectTab) {
        return
      }
      if (this.currentSelectTab.saved) { //取最新值
        if (this.currentSelectTab._id?.startsWith('local_')) {
          this.$store.commit('apidoc/apidoc/changeApidoc', this.$helper.apidocGenerateApidoc(this.currentSelectTab._id));
          this.$store.commit('apidoc/apidoc/changeOriginApidoc')
          return
        }
        this.$store.dispatch('apidoc/apidoc/getApidocDetail', {
          id: this.currentSelectTab?._id,
          projectId: this.$route.query.id,
        })
      } else { //取缓存值
        const catchedApidoc = apidocCache.getApidoc(this.currentSelectTab._id);
        if (!catchedApidoc) {
          this.$store.dispatch('apidoc/apidoc/getApidocDetail', {
            id: this.currentSelectTab?._id,
            projectId: this.$route.query.id,
          })
        } else {
          this.$store.commit('apidoc/apidoc/changeApidoc', catchedApidoc);
        }
      }
      //=====================================获取缓存的返回参数====================================//
      const localResponse = apidocCache.getResponse(this.currentSelectTab._id);
      this.$store.commit('apidoc/response/clearResponseInfo')
      if (localResponse) {
        this.$store.commit('apidoc/response/changeAll', localResponse);
      }
    },
  },
})
</script>

<style lang="scss" scoped>
.apidoc {
    overflow-y: auto;
    height: calc(100vh - #{size(100)});
    display: flex;
    &.vertical {
        flex-direction: column;
        overflow: hidden;
        .el-divider--horizontal {
            border-top: 1px dashed $gray-500;
        }
    }
    // 请求编辑区域
    .request-layout {
        flex: 1;
        overflow: hidden;
        border-right: 1px solid $gray-400;
        &.vertical {
            flex: 1;
            // border-bottom: 1px solid $gray-500;
            overflow-y: auto;
            // margin-top: -2px;
            // box-shadow: 0 3px 1px $gray-400;
        }
    }
    // 返回编辑区域
    .response-layout {
        flex-grow: 0;
        flex-shrink: 0;
        width: size(300);
        // flex: 0 0 size(500);
    }
    .el-divider--horizontal {
       margin: 0;
       z-index: $zIndex-drag-bar;
       font-size: fz(14);
    }
}
</style>
